import React, { Component } from 'react'
import Child from './Child'

export default class App extends Component {
  render() {
    return (
      <div>
        App
        <hr />
        {/* <Child children='hello world' /> */}
        {/* 组件的子节点会被当作的组件的 children 属性进行传递 */}
        {/* <Child>hello world</Child> */}
        {/* <Child>
          <h2>Hello World</h2>
        </Child> */}
        {/* 作用域插槽：可以在父组件中拿到子组件的数据
        在父组件加工处理后
        把加工处理后的结果再传递给子组件 */}
        {/* <Child>
          {(str) => {
            return <strong>{str + '~~~'}</strong>
          }}
        </Child> */}
        <Child
          children={(str) => {
            return <strong>{str + '~~~'}</strong>
          }}
        />
      </div>
    )
  }
}
